<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :title="$t('LOG_DETAIL')"
    :append-to-body="true"
    :visible="visible"
    custom-class="log-detail"
    :width="setDialogWidth('1200px')"
    @open="getDetail"
    @close="$emit('update:visible', false)"
  >
    <div v-if="taskData.bizId" class="text-danger font-larger mb-5">{{ $t('TEST_FAILED') }}!</div>
    <div class="flex flex-wrap justify-between mb-10 pr-10">
      <div>{{ $t('TASKNUMBER') }}：{{ taskData.taskId }}</div>
      <div>{{ $t('TASK_TYPE') }}：{{ dictMap.PROCESS_LIST_TASK_TYPE && dictMap.PROCESS_LIST_TASK_TYPE[taskData.taskType] }}</div>
      <div>{{ $t('DEVICE_CODE') }}：{{ taskData.afsDeviceId }}</div>
      <div>{{ $t('DEVICE_NAME') }}：{{ taskData.afsDeviceName }}</div>
      <!-- <div>{{ $t('PORT_NAME') }}：{{ }}</div> -->
    </div>
    <el-table
      v-if="gotList"
      ref="tableBox"
      :data="logList"
      style="width: 100%; margin-bottom: 5px"
      height="100%"
      border
    >
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column type="index" :label="$t('SEQUENCE')" :width="resetSize(60)" align="center" />
      <el-table-column
        :label="$t('RECORD_TIME')"
        show-overflow-tooltip
        prop="createTime"
        width="200px"
        align="left"
      />
      <el-table-column :label="$t('DESCRIPTION')" show-overflow-tooltip prop="desc" align="left">
        <template slot-scope="scope">
          {{ $utils.handleServiceI18n(scope.row.desc) }}
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="$emit('update:visible', false)">{{ $t('CLOSE') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import SubTaskApi from '@/api/oen/SubTaskApi'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      taskData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        logList: [],
        gotList: false
      }
    },
    computed: {
      ...mapGetters(['dictMap'])
    },
    methods: {
      getDetail() {
        this.logList = []
        this.gotList = false
        if (!this.taskData.taskId) return
        SubTaskApi.log({ taskId: this.taskData.taskId }).then(res => {
          this.gotList = true
          this.logList = res || []
          this.$nextTick(() => {
            this.$refs.tableBox && this.$refs.tableBox.doLayout()
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-dialog__wrapper :deep(.log-detail .el-dialog__body) {
    display: flex;
    flex-direction: column;
  }
</style>
